<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			.main{
				width: 500px;
				height: 600px;
				overflow: auto;
				border: 1px solid red;
				margin: calc(50vh - 300px) auto;
				position: relative;
				transition: all 0.5s ease-in-out;
			}
			.main>div{
				width: 100%;
				height: 300px;
				border: 1px solid black;
			}
		/* 	.main::after{
				content: '^';
				width:30px;
				height: 30px;
				border: 1px solid red;
				border-radius: 50% 50%;
				text-align: center;
				line-height: 30px;
				position: fixed;
				bottom:calc(50vh - 280px);
				left: calc(50vw + 180px);
			} */
			/* .main::after :hover{
				cursor: pointer;
				background-color: red;
			} */
			.backtop{
				width:30px;
				height: 30px;
				border: 1px solid red;
				border-radius: 50% 50%;
				text-align: center;
				line-height: 30px;
				position: fixed;
				bottom:calc(50vh - 280px);
				left: calc(50vw + 180px);
				z-index: 9;
				display: none;
			}
			.backtop:hover{
				cursor: pointer;	
			}
		</style>
	</head>
	<body>
		<div class="backtop">^</div>
		<div id="main" class="main">
			<div id="test1 ">
				1
			</div>
			<div id="test2 ">
				2
			</div>
			<div id="test3">
				3
			</div>
			<div id="test4">
				4
			</div>
			<div id="test5">
				5
			</div>
		</div>
		<script>
			$(function(){
				$(".main").scroll(function(){
					if($(".main").scrollTop()>=600){
						$(".backtop").show()
					}else{
						$(".backtop").hide()
					}
				})
				$(".backtop").click(function(){
					$(".main").scrollTop(0)
				})
				
			})
		</script>
		
	</body>
</html>
